<template lang="">
    <div class="content">
        <div class="titleLand">
            <div id="newPub">
                <div class="line"></div>
                <div class="desc">{{title}}</div>
            </div>
            <div class="r">
                <div id="see-more" @click="seeMore">
                    查看更多
                </div>
                <div id="pointer">
                    <i class="el-icon-arrow-left" @click="toLeft"></i>
                    <i class="el-icon-arrow-right" @click="toRight"></i>
                </div>
            </div>
        </div>

        <div class="items">
            <div class="item" v-for="(item, index) in goodLists" :key="index" @click="toDetails(item)">
                <img src="@/assets/images/posts/1.jpg" alt="物品详情图">
                <div class="itemText">
                    <div class=".desc">{{item.desc}}</div>
                    <div class="price">
                        <div class="oldPrice">${{item.price}}</div>
                        <div class="newPrice" :v-if="item.newPrice">${{item.newPrice}}</div>
                    </div>
                </div>
                <div class="oper">
                    <el-button @click="buyItem(item)">购买</el-button>
                    <img class="heart" src="@/assets/images/svg/heart.svg" alt="">
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {

            }
        },
        props: {
            goodLists: {
                type: Array,
                required: true,
            },
            title:{
                type:String,
                required:true
            }
        },
        methods: {
            toLeft() {
                this.goodLists.push(this.goodLists.shift())
            },
            toRight() {
                this.goodLists.unshift(this.goodLists.pop())
                console.log("r");
            },
            seeMore() {
                console.log("seeMore");
            },
            buyItem(item) { 
                console.log("buyItem", item);
            },
            toDetails(item){
                this.$router.push({
                    name:'details',
                    query:{
                        id:item.id
                    }
                })
            }
        },
    }
</script>
<style lang="less" scoped>
    @import url('@/assets/less/excellentBox.less');
</style>